<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <!--表单开始-->

    <a-form ref="formRef" :model="formState" layout="vertical" :rules="RULES">
      <a-row :gutter="[12,12]">
        <a-col :span="12">
          <a-form-item label="套餐代码" field="code" >
            <a-input v-model="formState.code" placeholder="请填写套餐代码" :disabled="isUpdate"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="套餐名称" field="name" >
            <a-input v-model="formState.name" placeholder="请填写套餐名称" />
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-form-item label="售价金币" field="price" >
            <a-input-number v-model="formState.price" placeholder="请填写售价金币">
              <template #append>
                <span style="width: 60px;">
                     /天
                </span>

              </template>
            </a-input-number>

          </a-form-item>
        </a-col>



        <a-col :span="12">
          <a-form-item :label="`显示排序值 [ ${formState.sort} ]` " field="sort" tooltip="升序排序 显示值越小 显示越靠前">
            <a-input-number v-model="formState.sort"/>
          </a-form-item>
        </a-col>



        <a-col :span="6">
          <a-form-item label="食物库存" field="stock" >
            <a-input-number v-model="formState.stock" placeholder="请填写套餐库存"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="食物状态" field="status" >


            <smart-dict v-model="formState.status" placeholder="请填写食物状态" :url="DictOptions.ProfileStatus" :max-tag="20"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="最低食用等级" field="minLevel" >
            <a-input-number v-model="formState.minLevel" placeholder="请填写最低食用等级"/>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="最高食用等级" field="maxLevel" >
            <a-input-number v-model="formState.maxLevel" placeholder="请填写最高食用等级"/>
          </a-form-item>
        </a-col>




        <a-col :span="12">
          <a-form-item label="是否是套餐包" field="isPack" >
            <smart-bool v-model="formState.isPack" text-true="是" text-false="否" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="有机属性" field="isOrganic">
            <smart-bool v-model="formState.isOrganic"  :disabled="isUpdate" true-text="有机套餐" false-text = "普通套餐"/>
          </a-form-item>
        </a-col>
        <a-col v-if="!formState.isPack" :span="24">
          <a-form-item label="套餐详情" field="meat" >

            <a-checkbox-group v-model="formState.meat"   >
              <a-grid :cols="5" :col-gap="12" :row-gap="12">
                <a-grid-item v-for="(item, index) in optionList" :key="index">
                  <a-checkbox :value="item.value">{{item.label}}</a-checkbox>
                </a-grid-item>
              </a-grid>

            </a-checkbox-group>




          </a-form-item>
        </a-col>


      </a-row>
    </a-form>
    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>


import {ref} from "vue";
import {EditDrawer} from '@/libs/core'
import {COMBO_EDIT} from "../../resource/form";
import {ProductHttp} from '../../resource/http'
import {DictOptions,ProductOptions} from "@/libs/options";
import {RequestUtil} from "@/utils";


const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const {BODY, RULES} = COMBO_EDIT

const {addCombo, updateCombo} = ProductHttp
const config = {tplRecord: BODY, rawRecord: props.record, rowKey: 'id', emit}
const service = new EditDrawer(config).setAddRequest(addCombo).setUpdateRequest(updateCombo)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改套餐' : '新增套餐'
const optionList = ref([])

const loadList = async ()=>{
 const {data} =   await RequestUtil.getAjax(ProductOptions.PropsProfileOptions)
  optionList.value=data
}
loadList()
</script>
